<svelte:options tag="zz-msg-box" />

<script>
  import { createEventDispatcher } from 'svelte';
  export let num = 4;
  const dispatch = createEventDispatcher();
  function foot1 () {
    dispatch('foot1', '清空通知')
  }
  function foot2() {
    dispatch('foot2', '查看更多')
  }
</script>

<div style="display: flex;flex-direction: column;">
  <slot name="head">
    <div>
      提醒 ({num})
    </div>
  </slot>
  <div>
    <slot>

    </slot>
  </div>
  <slot name="foot">
    <div style="display: grid;grid-template-columns: 1fr 1fr;">
      <div on:click={foot1} style="cursor: pointer;border: 1px solid gray;">清空通知</div>
      <div on:click={foot2} style="cursor: pointer;border: 1px solid gray;">查看更多</div>
    </div>
  </slot>
</div>


<style lang=scss>

</style>